<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>影院管理</el-breadcrumb-item>
      <el-breadcrumb-item>影院列表</el-breadcrumb-item>
      <el-breadcrumb-item>放映厅列表</el-breadcrumb-item>
      <el-breadcrumb-item>配置座位模板</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 分割线 -->

    <el-divider></el-divider>
    <el-container>
      <el-aside>
        <!-- 时间线 -->
        <el-timeline>
          <!-- 第一步 -->
          <el-timeline-item
            ><el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>编辑坐标系</span>
              </div>
              <el-form label-width="60">
                <el-form-item label="行数">
                  <el-input
                    v-model="rows"
                    size="small"
                    placeholder="请输入行数"></el-input>
                </el-form-item>
                <el-form-item label="列数">
                  <el-input
                    v-model="cols"
                    size="small"
                    placeholder="请输入列数"></el-input>
                </el-form-item>
                <el-button
                  @click="step1()"
                  type="primary"
                  size="small"
                  plain
                  style="width: 100%"
                  >生成座位模板</el-button
                >
              </el-form>
            </el-card>
          </el-timeline-item>
          <!-- 第二步 -->
          <el-timeline-item>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>请选择座位区域</span>
              </div>
              <el-button
                @click="step2()"
                type="primary"
                size="small"
                plain
                style="width: 100%"
                >撤销选中</el-button
              >
            </el-card>
          </el-timeline-item>
          <!-- 第三步 -->
          <el-timeline-item>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>请选择座位类型</span>
              </div>
              <el-button
                @click="step3_1()"
                type="primary"
                size="small"
                plain
                style="width: 100%"
                >普通座位</el-button
              >
              <br />
              <br />
              <el-button
                @click="step3_2()"
                type="primary"
                size="small"
                plain
                style="width: 100%"
                >过道</el-button
              >
            </el-card>
          </el-timeline-item>
          <!-- 第四步 -->
          <el-timeline-item>
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span>确认模板</span>
              </div>
              <el-button
                @click="step4()"
                type="success"
                size="small"
                plain
                style="width: 100%"
                >确认</el-button
              >
            </el-card>
          </el-timeline-item>
        </el-timeline>
      </el-aside>
      <el-main>
        <!-- 提示标签 -->
        <div class="tip">
          <div class="tip-item" style="background: #36d6"></div>
          <span> 未选择座位 &nbsp;&nbsp;</span>
          <div class="tip-item" style="background: #36d"></div>
          <span> 已选择座位&nbsp;&nbsp;</span>
          <div class="tip-item" style="background: #a11"></div>
          <span> 普通座位 &nbsp;&nbsp;</span>
          <div class="tip-item" style="background: #3333"></div>
          <span> 过道&nbsp;&nbsp;</span>
        </div>
        <el-divider></el-divider>
        <el-divider>电影荧屏</el-divider>
        <canvas id="canvas"></canvas>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import SeatSelector from "@/libs/SeatSelector.js"
export default {
  data() {
    return {
      id: this.$route.params.id,
      rows: 0,
      cols: 0,
      // 座位模板对象
      SeatSetting: null,
    }
  },
  methods: {
    // 生成座位模板 绘制在canvas
    step1() {
      let row = parseInt(this.rows)
      let col = parseInt(this.cols)
      // 创建对象 传入行数 列数和canvas
      this.SeatSetting = new SeatSelector(row, col, "canvas")
      // 绘制canvas
      this.SeatSetting.draw()
    },
    // 撤销选中
    step2() {
      if (this.SeatSetting) {
        this.SeatSetting.setNoSelect()
      }
    },
    // 改为普通座位
    step3_1() {
      if (this.SeatSetting) {
        this.SeatSetting.setSelectSeatsToNormalSeats()
      }
    },
    // 改为过道
    step3_2() {
      if (this.SeatSetting) {
        this.SeatSetting.setSelectSeatsToGangway()
      }
    },
    // 选好了
    step4() {
      if (this.SeatSetting) {
        try {
          let seat_template = this.SeatSetting.getSeatTemplateJsonString()
          let room_size = this.SeatSetting.getSeatCount()
          let id = this.id
          this.$http.CinemaRoomApi.updataSeatTemplate({
            seat_template,
            id,
            room_size,
          }).then((res) => {
            console.log("更新座位模板", res)
            if (res.data.code == 200) {
              this.$message.success("更新成功,座位模板完成")
              this.$router.go(-1)
            }
          })
        } catch (error) {
          this.$message.error(error)
        }
      }
    },
  },
}
</script>

<style lang="scss" scoped>
#canvas {
  border: 1px dashed#999;
  border-radius: 4px;
  display: none;
  margin: 0 auto;
}
.tip {
  text-align: center;
  margin-bottom: 20px;
  user-select: none;
}
.tip-item {
  display: inline-block;
  width: 20px;
  height: 20px;
  vertical-align: middle;
}
</style>
